
<script>
import { ElMessage, ElMessageBox } from 'element-plus'
import { getOrderList, add, edit, del } from "@/api/order.js"
import * as echarts from 'echarts';
import { Search } from '@element-plus/icons-vue'
export default {
  data() {
    return {
      myChart: null,
      dataList: [],
      drawer: false,
      Search,
      currentPage: 1,
      int: '',
      select1: '',
      arr:[],
      orderdata: {
        orderType: '',// 订单类型
        orderState: '',// 订单状态
        name: '',//姓名
        sex: '', //性别
        tel: '',  //电话
        id: '',
        payType: '',//支付方式
        orderNum: '', //订单编号
        money: '', // 收入
        orderTime: '',// 订单创建日期 

      },
      defaultCheckedKeys: [],
      interfaceType: '1'
    }
  },
  mounted() {
    getOrderList({ page: 0 }).then(res => {
      // console.log(res)
      this.dataList = res
    })
    // 基于准备好的dom，初始化echarts实例
    this.myChart = echarts.init(document.getElementById('main'));
    this.myChart.setOption({
      title: {
        text: '每月订单量     单位/笔'
      },
      tooltip: {
        trigger: 'axis'
      },
      legend: {
        data: ['房屋', '家服', '维修',]
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      toolbox: {
        feature: {
          saveAsImage: {}
        }
      },
      xAxis: {
        type: 'category',
        boundaryGap: false,
        data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      },
      yAxis: {
        type: 'value'
      },
      series: [
        {
          name: '房屋',
          type: 'line',
          // stack: 'Total',
          smooth: true,
          showSymbol: false,
          data: [1500, 1200, 1100, 1300, 1600, 1700, 1799, 1700, 1600, 1500, 1400, 1300]
        },
        {
          name: '家服',
          type: 'line',
          // stack: 'Total',
          smooth: true,
          showSymbol: false,
          data: [1300, 1100, 1000, 1200, 1400, 1500, 1599, 1400, 1300, 1280, 1300, 1300]
        },
        {
          name: '维修',
          type: 'line',
          smooth: true,
          // stack: 'Total',
          showSymbol: false,
          data: [1000, 900, 1000, 1100, 1300, 1400, 1499, 1300, 1200, 1120, 1200, 1200]
        },


      ]
    })
    this.myChart = echarts.init(document.getElementById('pie'));
    this.myChart.setOption({
      title: {
        text: '租房时长占比'
      },
      tooltip: {
        trigger: 'item'
      },
      legend: {
        top: '5%',
        left: 'center'
      },
      series: [
        {
          name: '租房时长占比',
          type: 'pie',
          radius: ['30%', '70%'],
          avoidLabelOverlap: false,
          itemStyle: {
            borderRadius: 10,
            borderColor: '#fff',
            borderWidth: 2
          },
          label: {
            show: false,
            position: 'center'
          },
          emphasis: {
            label: {
              show: true,
              fontSize: 16,
              fontWeight: 'bold'
            }
          },
          labelLine: {
            show: false
          },
          data: [
            { value: 280, name: '短租' },
            { value: 720, name: '长租' },

          ]
        }
      ]
    })
  },
  computed: {
    computedTableData() {
      return this.dataList.slice((this.currentPage - 1) * 10, (this.currentPage - 1) * 10 + 10)
    }
  },
  methods: {
    addClick() {
      this.interfaceType = '1'
      this.drawer = true
    },
    add1() {

      //将管理员数据发送给服务器
      //收集数据
      // console.log(this.orderdata)
      //将数据发送服务器

      add(this.orderdata).then(res => {
        // console.log(res)
        getOrderList({ page: 0 }).then(res => {
          // console.log(res);
          this.dataList = res

        })
      })



      //关闭抽屉
      this.drawer = false
    },
     
    // update() {
    //   console.log(this.orderdata)
        
    //   edit(this.orderdata).then(res => {
    //     console.log(res)

    //     //重新获取最新的数据
    //     //获取管理员列
    //     getOrderList({ page: 0 }).then(res => {
    //       // console.log(res);
    //       this.dataList = res

    //     })
    //     this.drawer = false
    //   })
     

    // },
    //返回
    fanhui(){
      this.drawer = false
    },
    //查看
    editClick(row) {
      this.drawer = true
      this.interfaceType = '2'
      // console.log(row)
      this.orderdata.orderType = row.orderType
      this.orderdata.orderNum = row.orderNum
      this.orderdata.orderState = row.orderState
      this.orderdata.name = row.name
      this.orderdata.sex = row.sex
      this.orderdata.tel = row.tel  
      this.orderdata.payType = row.payType
      this.orderdata.orderTime = row.orderTime
      this.orderdata.money = "+1,200"
    },
    close() {
      this.orderdata = {}
      this.defaultCheckedKeys = []
    },
  
   
    //删除数据
    deleteClick(row) {
      // console.log(row)
      ElMessageBox.confirm(
        '你确定要删除吗?',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        }
      ).then(() => {
        del(row).then(res => {
          // console.log(res)
          getOrderList({ page: 0 }).then(res => {
            // console.log(res)
            this.dataList = res
          })

        })
      })

    },
    //筛选  搜索框
    search() {
      getOrderList({ page: 0 }).then(res => {

        let arr1 = []
        for (let i = 0; i < res.length; i++) {

          if (res[i].orderNum == this.int) {
            // console.log(res[i])
            arr1.push(res[i])
            this.dataList = arr1
            return
          }
        }
      })
    },
    //下拉框筛选
    select() {
      this.arr =[]
      getOrderList({ page: 0 }).then(res => {
        
     
        for (let i = 0; i < res.length; i++) {
          // console.log(res[i].orderState)
          if (res[i].orderState == this.select1) {
            
            this.arr.push(res[i])
            this.dataList =this.arr
          
          }
        }
        
      })
      

    },
    
  },


}

</script>


<template>
  订单管理/订单总览
  <div class="box">
    <div class="top">
      <div id="main">
      </div>
      <div id="pie">
      </div>
    </div>
    <div class="bottom">
      <div class="lookup">
        <p class="left">
          <span>全部订单</span>
          <span>
            <el-select placeholder="支付" style="width: 115px" suffix-icon="CaretBottom" v-model="select1"
              @click="select">
              <el-option label="已支付" value="已支付" />
              <el-option label="未支付" value="未支付" />
            </el-select>
          </span>
        </p>
        <p class="right">
          <el-input v-model="int" size="small" placeholder="请输入需要查询的订单编号" :suffix-icon="Search" @click="search" />
          <el-button type="primary" @click="addClick">添加</el-button>
        </p>
      </div>

      <el-table :data="computedTableData" style="width: 100% " height="450">

        <el-table-column prop="orderType" label="订单类型" width="180" column-key="date" />
        <el-table-column prop="orderState" label="订单状态" />
        <el-table-column prop="orderNum" label="订单编号" />
        <el-table-column prop="name" label="姓名" />
        <el-table-column prop="sex" label="性别" />
        <el-table-column prop="tel" label="电话" />
        <el-table-column prop="payType" label="支付方式" />
        <el-table-column prop="orderTime" label="订单创建时间" />
        <el-table-column prop="money" label="收入" />
        <el-table-column label="操作">
          <template #default="scope">
            <div>
              <button @click="editClick(scope.row)">查看</button>
              <span><button @click="deleteClick(scope.row)">删除</button></span>
            </div>
          </template>

        </el-table-column>
        <!-- 分页 -->

      </el-table>

      <el-pagination background v-model:current-page="currentPage" layout="prev, pager, next" :total="50" />
    </div>
    <!-- 抽屉效果 -->
    <el-drawer @close="close" v-model="drawer">
      <template #header>
        <h4>{{ interfaceType == '1' ? '添加订单' : '查看订单' }}</h4>
      </template>
      <el-form label-width="120px">
        <el-form-item label="订单类型">
          <el-select placeholder="请输入订单类型" v-model="orderdata.orderType">
            <el-option label="租房" value="租房" />
            <el-option label="家服" value="家服" />
            <el-option label="维修" value="维修" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单编号">
          <el-input placeholder="请输入订单编号" v-model="orderdata.orderNum" />
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input placeholder="请输入订单状态" v-model="orderdata.orderState" />
        </el-form-item>
        <el-form-item label="姓名">
          <el-input placeholder="请输入姓名" v-model="orderdata.name" />
        </el-form-item>
        <el-form-item label="性别">
          <el-select placeholder="请输入性别" v-model="orderdata.sex">
            <el-option label="男" value="男" />
            <el-option label="女" value="女" />
          </el-select>
        </el-form-item>
        <el-form-item label="电话">
          <el-input placeholder="请输入电话" v-model="orderdata.tel" />
        </el-form-item>
        <el-form-item label="支付方式">
          <el-select placeholder="请输入付方式" v-model="orderdata.payType">
            <el-option label="微信支付" value="微信支付" />
            <el-option label="支付宝支付" value="支付宝支付" />
            <el-option label="银行卡支付" value="银行卡支付" />
          </el-select>
        </el-form-item>
        <el-form-item label="订单时间">
          <el-input placeholder="请输入订单时间" v-model="orderdata.orderTime" />
        </el-form-item>
        <el-form-item label="月租">
          <el-select placeholder="请输入月租费" v-model="orderdata.money">
            <el-option label="+1,200" value="+1,200" />
          </el-select>
        </el-form-item>
    
      </el-form>
      <el-button v-if="interfaceType == '1'" @click="add1" type="primary">添加</el-button>
        <el-button v-else type="primary" @click="fanhui">返回</el-button>
    </el-drawer>
  </div>

</template>
<style lang="scss" scoped>
#main {
  height: 300px;
  background-color: #fff;

  width: 1000px;
}

#pie {
  height: 300px;
  background-color: #fff;

  width: 500px;
}

.top {
  width: 100%;
  height: 300px;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.bottom {
  height: 500px;
  margin-top: 50px;
  overflow: auto;
}

.el-menu-item {
  width: 11%;
}

.el-menu {
  height: 30px;
}

select {
  margin-left: 50px;
}

.lookup {
  height: 50px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

.el-menu {
  background-color: aqua;
}

.el-button {
  margin-left: 20px;
}

.el-input {
  width: 250px;
}
</style>